import styled from 'styled-components';

export const HeaderWrap = styled.div`
    background-color: #fff;
    border:1px solid #f0f0f0;
  .nav{
    min-width: 768px;
    max-width: 1440px;
    margin: 0 auto;
    height: 58px;
    box-sizing:border-box;
    .container{
      width: 945px;
      height: 58px;
      line-height:58px;
      margin:0 auto;
      .menu-text{
        display: inline-block;
        width:89px;
        height: 58px;
        color: #ea6f5a;
        font-size:18px;
        .iconfont{
          margin-right:6px;
        }
      }
      .searchInput{
        margin-left:20px;
        position:relative;
        input{
          outline:none;
          padding: 0 40px 0 20px;
          width: 160px;
          height: 38px;
          font-size: 14px;
          border: 1px solid #eee;
          border-radius: 40px;
          background: #eee;
            &.focused {
            width: 240px;
            }
            &.slide-enter {
                transition: all .2s ease-out;
            }
            &.slide-enter-active {
              width: 240px;
            }
            &.slide-exit {
              transition: all .2s ease-out;
            }
            &.slide-exit-active {
              width: 160px;
            }
        }
        .iconfont{
          font-size:22px;
          position:absolute;
          left: 190px;
          &.focused{
          left: 260px;
          top: -7px;
          height: 38px;
          width:38px;
          line-height:38px;
          text-align:center;
          background:#545151;
          border-radius:100%;
          color:#fff;
          }
          &.slide-enter {
                transition: left .2s ease-out;
            }
            &.slide-enter-active {
              left: 260px;
            }
            &.slide-exit {
              transition: left .2s ease-out;
            }
            &.slide-exit-active {
              width: 190px;
            }
        }
        .search-tips{
          position:absolute;
          margin-top: 14px;
          width: 250px;
          left: 0;
          top: 100%;
          border-radius: 4px;
          background-color: #fff;
          box-shadow: 0 0 8px rgba(0,0,0,.2);
          font-size:14px;
            color: #aaa;
          .search-tips-header{
            height: 40px;
            line-height:40px;
            padding:10px 10px 0 10px;
            cursor:pointer;
            .title{
              float:left;
            }
            .another{
              float:right;
              cursor:pointer;
            }
          }
          .search-tips-content{
            padding-bottom:8px;
            overflow:hidden;
            .search-item{
             float:left;
             padding:3px;
              height: 30px;
              line-height:30px;
              border:1px solid #aaa;
              background:#fff;
              border-radius:4px;
              margin:4px 4px 0 4px;
              cursor:pointer;
            }
          }
        }
      }
      .downLoadApp{
        display: inline-block;
        height: 56px;
        line-height: 26px;
        padding: 15px;
        color: #333;
        font-size:18px;
        .iconfont{
          margin-right:6px;
        }
      }
      .container_right{
        float:right;
        cursor:pointer;
        .Aa{
          line-height: 20px;
          padding: 17px 10px 17px 15px;
          font-size: 18px;
          color: #969696;
          .iconfont{
            font-size:24px;
          }

        }
        .loginBtn{
          margin: 11px 6px 0 10px;
          font-size: 18px;
          color: #969696;
        }
      }
    }
    .headerLogo{
      width:100px;
      height: 56px;
    }
    .LogoLeft{
      float:left;
    }
    .Headeright{
      float:right;
      cursor:pointer;
    }
    .editRight{
       width: 100px;
        height: 40px;
        line-height: 40px;
        margin: 8px 15px 0;
        border-radius: 20px;
        font-size: 15px;
        color: #fff;
        background-color: #ea6f5a;
        text-align:center;
        .iconfont{
          color: #fff;
          font-size: 16px;
          font-weight: bolder;
        }
    }
    }
    .registerRight{
      width: 80px;
      height: 38px;
      line-height: 38px;
      text-align:center;
      margin: 9px 5px 0 15px;
      border: 1px solid rgba(236,97,73,.7);
      border-radius: 20px;
      font-size: 15px;
      color: #ea6f5a;
      background-color: transparent;
    }
  }
`;